<template>
  <div>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    <van-icon name="gem-o" />
    <router-view />
    <div class="box">
      <p>我是文本</p>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    // console.dir(this.$http)
    // 测试请求
    this.$http({
      method: 'get',
      url: '/v1_0/channels'
    }).then(res => {
      console.log(res)
    })
  }
}
</script>

<style lang="scss">
// scss 和 less语法很相近 less中定义变量是 @变量名: 值;
// scss 定义变量 $变量名: 值;
// sass 语法书写严格要求,代码不允许有{} 和 ; sass 语法和 stylus 类似
/* $baseColor: red
.box
  p
    font-size: 80px
    color: $baseColor
    background-color: #ccc
 */
 $baseColor: red;
.box{
  width: 375px;
  height: 200px;
  background-color: red;
  // p{
  //   font-size: 80px;
  //   color: $baseColor;
  //   background-color: #ccc;
  // }
}

</style>
